<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
    <div class="selectModelType" >
      <div class="tip"><p>功能面板 | 地图框架</p></div>
      <el-button type="success"  :disabled=!hasFrame size="mini" @click="switchMapFrame()">切换框架</el-button>
      <el-button type="danger" :disabled=!hasFrame size="mini" @click="unloadMapFrame()">卸载框架</el-button>
      <br /><br />
      <el-button type="primary" :disabled=hasFrame size="mini" @click="loadMapFrame('cesium')">加载Cesium</el-button>
      <el-button type="primary" :disabled=hasFrame size="mini" @click="loadMapFrame('leaflet')">加载Leaflet</el-button>
      <br /><br />
      <el-button type="primary" :disabled=!hasFrame size="mini" @click="relocation()">重定位</el-button>
      <el-button type="primary" disabled size="mini" @click="">测试</el-button>

    </div>
    <div id="toolTip" style="z-index: 1000;display:none;position:absolute;height:20px;width:160px;background:olive;top:0px;left:0px;font-size: 8px">
      <el-button id="toolTipButton" type="danger" size="mini" style="" @click="clearDrawingBoard()">清除</el-button>
    </div>
    <!--    <my-viewer :mapProps="mapProps" @viewerisok=""></my-viewer>-->
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/base.css';
  import {getJsMethod} from "../../script/utils/common"
  import {eventBus, Gisevevts} from "../../script/events";
  import {getRectangle} from "../../script/cesiumFunction/cesiumBaseF";
  export default {
    name: "test",
    data() {
      return {
        hasFrame:true,
        rectangle:Object,
      }
    },
    components: {
    },
    created() {//页面渲染前，即通常初始化某些属性值，然后再渲染成视图
    },
    mounted() {//页面渲染完成后，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    },
    watch:{
    },
    methods: {
      //设置边界
      setRectangle(){
        getJsMethod("setRectangle").then(e => e(this.rectangle));
      },
      //重定位
      relocation(){
        getJsMethod("relocation").then(e => e());
      },
      //卸载当前的地图框架
      unloadMapFrame(){
        getJsMethod("getRectangle").then(e => {
          this.rectangle = e();
          getJsMethod("unloadMapFrame").then(e => e());
          this.hasFrame = false;
        });
      },
      switchMapFrame(){
        eventBus.$emit(Gisevevts["handlerMapFrameSwitch"]);
      },
      loadMapFrame(loadMap){
        this.hasFrame = true;
        this.$store.state.currentFrameNameStore = loadMap;
        getJsMethod("initMap").then(e => {
          e();
          this.setRectangle(this.rectangle);
        });
      },
    },
    destroyed() {
      // mapBaseF.removeAllNtt();
    },
  }
</script>

<style scoped>
  .el-button{
    width: 100px;
  }
</style>
